.custom-calendar {

  .calendar-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .single-calendar {
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
      background: #FFFFFF;
      border: 1px solid #D7DCE6;
      border-radius: 4px;
      width: 280px;
      height: 274px;
      margin: 0 0 24px 24px;

      .calendar-header {
        width: 100%;
        height: 39px;
        border-bottom: 1px solid #EBF0F5;
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #000F00;
        text-align: left;
        line-height: 39px;
        padding-left: 24px;
      }
      .week-box {
        cursor: default;
        padding: 0 10px;
        margin-top: 14px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .week-title {
          width: 40px;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #4E5B71;
          text-align: center;
          line-height: 22px;
        }
      }
      .days-box {
        cursor: default;
        padding: 8px 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .one-day {
          transition: all ease 0.2s;
          background-color: #FFF;
          width: 24px;
          height: 24px;
          margin: 3px 6.425px;
          font-family: HelveticaNeue;
          font-size: 14px;
          color: #4E5B71;
          text-align: center;
          line-height: 24px;
          border-radius: 2px;
        }
        .no-work-day {
          transition: all ease 0.2s;
          background-color: #DFF1FF;
          width: 24px;
          height: 24px;
          margin: 3px 6.425px;
          font-family: HelveticaNeue;
          font-size: 14px;
          color: #4E5B71;
          text-align: center;
          line-height: 24px;
          border-radius: 2px;
        }
        .holiday {
          transition: all ease 0.2s;
          background-color: #FFE7BE;
          width: 24px;
          height: 24px;
          margin: 3px 6.425px;
          font-family: HelveticaNeue;
          font-size: 14px;
          color: #4E5B71;
          text-align: center;
          line-height: 24px;
          border-radius: 2px;
        }
        .add-day {
          background-color: #FFF;
          width: 24px;
          height: 24px;
          margin: 3px 6.425px;
          font-family: HelveticaNeue;
          font-size: 14px;
          color: rgba(0,0,0,0.25);
          text-align: center;
          line-height: 24px;
          border-radius: 2px;
        }

        .pointer {
          cursor: pointer;
        }

        .hover {
          &.one-day:hover {
            background-color: #f5f5f5;
          }
          &.no-work-day:hover {
            background-color: #b9d5eb;
          }
          &.holiday:hover {
            background-color: #f6d9aa;
          }
        }
      }
    }
  }
}
